<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<!-- contents in  -->
<div class="ddp-type-contents-in ddp-scroll">

  <div class="ddp-box-popupcontents2 ddp-box-source-create ddp-box-type">
    <!-- Datasource expiration -->
    <div class="ddp-wrap-edit2 ddp-type" *ngIf="createType === 'DB' && getConnectionType() === 'LINK'">
      <label class="ddp-label-type ddp-bold">{{'msg.storage.th.dsource-expire' | translate}}</label>
      <div class="ddp-ui-option-sub">
        <label class="ddp-ui-label-name">
          {{'msg.storage.th.time-interval' | translate}}
        </label>
        <!-- select box -->
        <div class="ddp-type-selectbox ddp-setting" [class.ddp-selected]="isShowExpirationTimeList"
             (click)="isShowExpirationTimeList = !isShowExpirationTimeList"
             (clickOutside)="isShowExpirationTimeList=false">
          <span class="ddp-txt-selectbox">{{selectedExpirationTime.label}}</span>
          <ul class="ddp-list-selectbox ddp-selectdown">
            <li *ngFor="let expiration of expirationTimeList">
              <a href="javascript:" (click)="onChangeExpirationTime(expiration)">
                {{expiration.label}}
              </a>
            </li>
          </ul>
        </div>
        <!-- //select box -->
      </div>
    </div>
    <!-- //Datasource expiration -->
    <!-- Ingestion settings (DB-ENGINE) -->
    <div class="ddp-wrap-edit2 ddp-type" *ngIf="createType === 'DB' && getConnectionType() === 'ENGINE'">
      <label class="ddp-label-type ddp-bold">{{'msg.storage.th.ingestion-settings' | translate}}</label>
      <!-- edit option -->
      <div class="ddp-ui-option-sub">
        <div class="ddp-ui-edit-option">
          <label class="ddp-label-radio" *ngFor="let type of ingestionTypeList" (change)="onChangeIngestionType(type)">
            <input type="radio" [checked]="type.value === selectedIngestionType.value">
            <i class="ddp-icon-radio"></i>
            <span class="ddp-txt-radio">{{type.label}}</span>
          </label>
        </div>
        <!-- box sub -->
        <div class="ddp-box-sub">
          <!-- sub opton -->
          <div class="ddp-box-sub-option">
            <label class="ddp-label-type">{{'msg.storage.th.scope-ingest' | translate}}</label>
            <div class="ddp-option-in">
              <label class="ddp-label-radio" *ngFor="let scope of ingestionScopeTypeList"
                     (change)="onChangeIngestionScopeType(scope)">
                <input type="radio"
                       [disabled]="scope.value === 'INCREMENTAL' && isUsedCurrentTimestampColumn()"
                       [checked]="selectedIngestionScopeType.value === scope.value">
                <i class="ddp-icon-radio"></i>
                <span class="ddp-txt-radio">{{scope.label}}</span>
              </label>
              <!-- single -->
              <ng-container *ngIf="selectedIngestionType.value === 'single'">
                <div class="ddp-box-option-input ddp-inline type-row">
                  <input type="text" placeholder="10,000"
                         input-mask="number" class="ddp-txt-right"
                         [disabled]="selectedIngestionScopeType.value !== 'ROW'"
                         [(ngModel)]="ingestionOnceRow">
                  <span class="ddp-txt-input">{{'msg.storage.ui.rows' | translate}}</span>
                </div>
                <div class="ddp-txt-error" *ngIf="selectedIngestionScopeType.value === 'ROW' && isMaxRowOverValue('ingestionOnceRow', 10000)">
                  <em class="ddp-icon-error-s"></em>{{'msg.storage.ui.max.row.error' | translate: {value: '10,000'} }}
                </div>
              </ng-container>
              <!-- //single -->
            </div>

          </div>
          <!-- //sub opton -->

          <!-- Batch cycle (batch) -->
          <div class="ddp-box-sub-option" *ngIf="selectedIngestionType.value === 'batch'">
            <label class="ddp-label-type">{{'msg.storage.th.batch-cycle' | translate}}</label>
            <div class="ddp-option-in">
              <!-- cycle -->
              <div class="ddp-ui-cycle ddp-clear">
                <!-- 배치주기 -->
                <div class="ddp-type-selectbox ddp-type-cycle" [class.ddp-selected]="isShowBatchTypeList"
                     (click)="isShowBatchTypeList = !isShowBatchTypeList" (clickOutside)="isShowBatchTypeList=false">
                  <span class="ddp-txt-selectbox">{{selectedBatchType.label}}</span>
                  <ul class="ddp-list-selectbox ddp-selectdown">
                    <li *ngFor="let type of batchTypeList">
                      <a href="javascript:" (click)="onSelectBatchType(type)">{{type.label}}</a>
                    </li>
                  </ul>
                </div>
                <!-- //배치주기 -->
                <!-- 시간 (HOURLY) -->
                <div class="ddp-type-selectbox ddp-type-cycle" [class.ddp-selected]="isShowHourList"
                     *ngIf="selectedBatchType.value === 'HOURLY'"
                     (click)="isShowHourList = !isShowHourList" (clickOutside)="isShowHourList=false">
                  <span class="ddp-txt-selectbox">{{selectedHour}}</span>
                  <ul class="ddp-list-selectbox ddp-selectdown">
                    <li *ngFor="let hour of hourList">
                      <a href="javascript:" (click)="onSelectHour(hour)">{{hour}}</a>
                    </li>
                  </ul>
                </div>
                <!-- //시간 (HOURLY) -->
                <!-- 분 (MINUTELY) -->
                <div class="ddp-type-selectbox ddp-type-cycle" [class.ddp-selected]="isShowMinuteList"
                     *ngIf="selectedBatchType.value === 'MINUTELY'"
                     (click)="isShowMinuteList = !isShowMinuteList" (clickOutside)="isShowMinuteList=false">
                  <span class="ddp-txt-selectbox">{{selectedMinute}}</span>
                  <ul class="ddp-list-selectbox ddp-selectdown">
                    <li *ngFor="let minute of minuteList">
                      <a href="javascript:" (click)="onSelectMinute(minute)">{{minute}}</a>
                    </li>
                  </ul>
                </div>
                <!-- //분 (MINUTELY) -->
                <!-- 요일 (WEEKLY) -->
                <div class="ddp-form-wrapper" *ngIf="selectedBatchType.value === 'WEEKLY'">
                  <!-- selectbox -->
                  <!-- 선택시 ddp-selected 추가 -->
                  <div class="ddp-type-selectbox" [class.ddp-selected]="isShowDateList"
                       (click)="isShowDateList = !isShowDateList" (clickOutside)="isShowDateList=false">
                    <span class="ddp-txt-selectbox">{{'msg.storage.btn.sel.day' | translate}}</span>
                    <div class="ddp-wrap-popup2">
                      <ul class="ddp-list-selectbox2">
                        <li *ngFor="let date of dateList" (click)="onSelectDate(date); $event.stopImmediatePropagation(); $event.preventDefault()">
                          <label class="ddp-label-checkbox">
                            <input type="checkbox" [checked]="date.checked">
                            <i class="ddp-icon-checkbox"></i>
                            <span class="ddp-txt-checkbox">{{date.label}}</span>
                          </label>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <!-- //selectbox -->
                  <component-time [defaultTime]="selectedWeeklyTime"
                                  (changeDate)="selectedWeeklyTime = $event"></component-time>
                </div>
                <!-- //요일 (WEEKLY) -->
                <!-- 시간 (DAILY) -->
                <component-time *ngIf="selectedBatchType.value === 'DAILY'"
                                [defaultTime]="selectedDailyTime"
                                (changeDate)="selectedDailyTime = $event"></component-time>
                <!-- //시간 (DAILY) -->
                <!-- crontab (EXPR) -->
                <ng-container *ngIf="selectedBatchType.value === 'EXPR'">
                  <div class="ddp-input-apply">
                    <input type="text" class="ddp-input-txt" placeholder="{{'msg.storage.ui.crontab.ph' | translate}}"
                           [ngModel]="cronText"
                           (ngModelChange)="cronText = $event; cronValidationResult = null"
                           (keypress)="onKeyPressCronText($event)"
                           (focusout)="cronValidation()">
                    <em class="ddp-icon-apply" (click)="cronValidation()"></em>
                  </div>
                  <div class="ddp-txt-error" *ngIf="cronValidationResult === false">
                    <em class="ddp-icon-error-s"></em>{{cronValidationMessage}}
                  </div>
                  <div class="ddp-ui-message" *ngIf="cronValidationResult === true">
                    <span class="ddp-data-ok"><em class="ddp-icon-ok"></em>{{'msg.storage.ui.cron.valid' | translate}}</span>
                  </div>
                </ng-container>
                <!-- //crontab (EXPR) -->
              </div>
              <!-- //cycle -->
            </div>
          </div>
          <!-- //Batch cycle (batch) -->
          <!-- Max. query row (batch) -->
          <div class="ddp-box-sub-option" *ngIf="selectedIngestionType.value === 'batch'">
            <label class="ddp-label-type">{{'msg.storage.th.max-query-row' | translate}}</label>
            <div class="ddp-option-in ddp-inline">
              <input type="text" class="ddp-input-typebasic ddp-size-sm ddp-txt-right" placeholder="10,000"
                     input-mask="number"
                     [(ngModel)]="ingestionPeriodRow">
              <div class="ddp-txt-error" *ngIf="isMaxRowOverValue('ingestionPeriodRow', 5000000)">
                <em class="ddp-icon-error-s"></em>{{'msg.storage.ui.max.row.error' | translate : {value: '5,000,000'} }}
              </div>
            </div>
          </div>
          <!-- //Max. query row (batch) -->
        </div>
        <!-- //box sub -->
      </div>
      <!-- //edit option -->
    </div>
    <!-- //Ingestion settings (DB-ENGINE) -->
    <!-- Timestamp settings -->
    <div class="ddp-wrap-edit2 ddp-type">
      <label class="ddp-label-type ddp-bold">{{'msg.storage.th.gran.settings' | translate}}</label>
      <!-- Partition (staging) -->
      <div class="ddp-ui-option-sub" *ngIf="(createType === 'STAGING' || createType === 'SNAPSHOT-STAGING') && partitionKeyList.length !== 0">
        <label class="ddp-ui-label-name">
          {{'msg.storage.ui.dsource.create.partition.keys' | translate}}
          <!-- info -->
          <div class="ddp-wrap-hover-info ddp-type">
            <em class="ddp-icon-info3"></em>
            <!-- popup -->
            <div class="ddp-wrap-pop-setting">
              <!-- popup -->
              <div class="ddp-box-layout4 ddp-pop-setting">
                <div class="ddp-data-title">
                  {{'msg.storage.ui.partition.info.title' | translate}}
                </div>
                <div class="ddp-data-det3">
                  {{'msg.storage.ui.partition.info.desc' | translate}}
                  <span class="ddp-data-ex">{{'msg.storage.ui.partition.info.sample' | translate}}</span>
                </div>
                <div class="ddp-form-scroll">
                  <div class="ddp-label-table">
                    <span class="ddp-txt-label">
                        {{'msg.storage.ui.partition.info.desc.step-1' | translate}}
                    </span>
                  </div>
                  <table class="ddp-table-info">
                    <colgroup>
                      <col width="150px">
                      <col width="">
                    </colgroup>
                    <tbody>
                    <tr>
                      <th>
                        yyyymm
                      </th>
                      <td>
                        201801
                      </td>
                    </tr>
                    <tr>
                      <th>
                        dd
                      </th>
                      <td>
                        01
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  <div class="ddp-data-date">yyyymm=201801/dd=01</div>
                  <div class="ddp-label-table">
                    <span class="ddp-txt-label">
                        {{'msg.storage.ui.partition.info.desc.step-2' | translate}}
                    </span>
                  </div>
                  <table class="ddp-table-info">
                    <colgroup>
                      <col width="150px">
                      <col width="">
                    </colgroup>
                    <tbody>
                    <tr>
                      <th>
                        yyyymm
                      </th>
                      <td>
                        201801, 201802
                      </td>
                    </tr>
                    <tr>
                      <th>
                        dd
                      </th>
                      <td>
                        01
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  <div class="ddp-data-date">yyyymm=201801/dd=01, yyyymm=201802/dd=01</div>
                  <div class="ddp-label-table">
                    <span class="ddp-txt-label">
                        {{'msg.storage.ui.partition.info.desc.step-3' | translate}}
                    </span>
                  </div>
                  <table class="ddp-table-info">
                    <colgroup>
                      <col width="150px">
                      <col width="">
                    </colgroup>
                    <tbody>
                    <tr>
                      <th>
                        yyyymm
                      </th>
                      <td>
                        201[6-8]
                      </td>
                    </tr>
                    <tr>
                      <th>
                        dd
                      </th>
                      <td>
                        [01-31]
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  <div class="ddp-data-date">
                    yyyymm=201601/dd=01 ~ yyyymm=201601/dd=31,<br>
                    yyyymm=201701/dd=01 ~ yyyymm=201701/dd=31,<br>
                    yyyymm=201801/dd=01 ~ yyyymm=201801/dd=31
                  </div>
                  <div class="ddp-label-table">
                    <span class="ddp-txt-label">
                      {{'msg.storage.ui.partition.info.desc.step-4' | translate}}
                    </span>
                  </div>
                  <table class="ddp-table-info">
                    <colgroup>
                      <col width="150px">
                      <col width="">
                    </colgroup>
                    <tbody>
                    <tr>
                      <th>
                        yyyymm
                      </th>
                      <td>
                        201701
                      </td>
                    </tr>
                    <tr>
                      <th>
                        dd
                      </th>
                      <td>
                        {{'msg.storage.ui.partition.info.desc.step-4.blank' | translate}}
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  <div class="ddp-data-date">yyyymm=201701/dd=%</div>
                </div>
              </div>
              <!-- //popup -->
            </div>
          </div>
          <!-- //info -->
        </label>
        <div class="ddp-ui-edit-option">
          <!-- not strict mode, show partition radio button -->
          <ng-container *ngIf="!isStrictMode">
            <label class="ddp-label-radio" (change)="onChangePartitionType(partitionTypeList[0])">
              <input type="radio" [checked]="selectedPartitionType.value === partitionTypeList[0].value">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">{{partitionTypeList[0].label}}</span>
            </label>
            <label class="ddp-label-radio ddp-mgr0" (change)="onChangePartitionType(partitionTypeList[1])">
              <input type="radio" [checked]="selectedPartitionType.value === partitionTypeList[1].value">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">{{partitionTypeList[1].label}}</span>
            </label>
          </ng-container>
          <!-- partition -->
          <div class="ddp-wrap-partition" *ngIf="partitionKeyList.length !== 0 && selectedPartitionType.value === 'ENABLE'">
            <div class="ddp-ui-partition">
              <ul class="ddp-list-partition ddp-type" *ngFor="let keys of partitionKeyList; let i = index">
                <li *ngFor="let key of keys">
                  <span class="ddp-ui-label" *ngIf="i === 0">{{key.name}}</span>
                  <div class="ddp-data">
                    <input type="text" class="ddp-input-typebasic ddp-full" [(ngModel)]="key.value"
                           (ngModelChange)="initPartitionValidation()"
                           [disabled]="!isEnabledPartitionInput(keys, key)">
                  </div>
                </li>
              </ul>
              <div class="ddp-btn-control">
                <a href="javascript:" class="ddp-btn-add" (click)="addPartitionKeys()" *ngIf="partitionKeyList.length < 20"></a>
                <a href="javascript:" class="ddp-btn-delete" (click)="deletePartitionKeys()" *ngIf="partitionKeyList.length > 1"></a>
              </div>
              <!-- buttons -->
              <div class="ddp-ui-buttons ddp-inline" *ngIf="isStrictMode">
                <a href="javascript:" class="ddp-btn-pop ddp-bg-gray" (click)="onClickPartitionKeysValidation()">{{'msg.storage.btn.test' | translate}}</a>
                <!-- message -->
                <div class="ddp-ui-message">
                  <span class="ddp-data-error2" *ngIf="isClickedNext && partitionValidationResult === null">{{'msg.storage.ui.required' | translate}}</span>
                  <span class="ddp-data-ok" *ngIf="partitionValidationResult"> <em class="ddp-icon-ok"></em>{{partitionValidationResultMessage}}</span>
                  <span class="ddp-data-error" *ngIf="partitionValidationResult === false"> <em class="ddp-icon-error"></em>{{partitionValidationResultMessage}}</span>
                </div>
                <!-- //message -->
                <!-- 결과 -->
                <div class="ddp-wrap-result" #resultElement>
                  <a href="javascript:" class="ddp-link-result" *ngIf="partitionValidationResult" (click)="onClickPartitionKeyValidResult()">{{'msg.storage.btn.partition.result' | translate}} ></a>
                </div>
                <!-- //결과 -->
              </div>
              <!-- //buttons -->
            </div>
          </div >
          <!-- //partition -->
          <!-- result -->
          <div class="ddp-box-layout4 ddp-result" *ngIf="isShowPartitionValidResult" #resultBoxElement>
            <a href="javascript:" class="ddp-btn-close" (click)="isShowPartitionValidResult = false"></a>
            <div class="ddp-data-title">
              {{'msg.storage.ui.partition.result' | translate}}
            </div>
            <div class="ddp-data-det">
              <ng-container *ngFor="let data of partitionValidationResultData">
               {{data['PART_NAME']}} <span class="ddp-data-row">({{data['NUM_ROWS'] || ''}} {{'msg.storage.ui.partition.rows' | translate}} / {{bytesToSize(data['TOTAL_SIZE'])}})</span><br>
              </ng-container>
            </div>
          </div>
          <!-- //result -->
        </div>
      </div>
      <!-- //Partition (staging) -->
      <!-- Query granularity -->
      <div class="ddp-ui-option-sub">
        <label class="ddp-ui-label-name">
          {{'msg.storage.th.query.gran' | translate}}
          <!-- info -->
          <div class="ddp-wrap-hover-info ddp-type">
            <em class="ddp-icon-info3"></em>
            <!-- popup -->
            <div class="ddp-box-layout4">
              <div class="ddp-data-title">
                {{'msg.storage.th.query.gran.title' | translate}}
              </div>
              <div class="ddp-data-det">
                {{'msg.storage.th.query.gran.description' | translate}}
              </div>
            </div>
            <!-- //popup -->
          </div>
          <!-- //info -->
        </label>
        <div class="ddp-type-selectbox ddp-setting" [class.ddp-selected]="isShowQueryGranularityList" [class.ddp-disabled]="isReinjestion"
             (click)="isShowQueryGranularityList = !isShowQueryGranularityList"
             (clickOutside)="isShowQueryGranularityList=false">
          <span class="ddp-txt-selectbox">{{selectedQueryGranularity.label}}</span>
          <ul class="ddp-list-selectbox ddp-selectdown" *ngIf="!isReinjestion">
            <li *ngFor="let granularity of queryGranularityList">
              <a href="javascript:" (click)="onChangeQueryGranularity(granularity)">
                {{granularity.label}}
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- //Query granularity -->
      <!-- Segment granularity -->
      <div class="ddp-ui-option-sub">
        <label class="ddp-ui-label-name">
          {{'msg.storage.th.segment.gran' | translate}}
          <!-- info -->
          <div class="ddp-wrap-hover-info ddp-type">
            <em class="ddp-icon-info3"></em>
            <!-- popup -->
            <div class="ddp-box-layout4">
              <div class="ddp-data-title">
                {{'msg.storage.ui.segment-gran.title' | translate}}
              </div>
              <div class="ddp-data-det" [innerHTML]="'msg.storage.ui.segment-gran.description' | translate">
              </div>
            </div>
            <!-- //popup -->
          </div>
          <!-- //info -->
        </label>
        <div class="ddp-type-selectbox ddp-setting" [class.ddp-selected]="isShowSegmentGranularityList" [class.ddp-disabled]="isReinjestion"
             (click)="isShowSegmentGranularityList = !isShowSegmentGranularityList"
             (clickOutside)="isShowSegmentGranularityList=false">
          <span class="ddp-txt-selectbox">{{selectedSegmentGranularity.label}}</span>
          <ul class="ddp-list-selectbox ddp-selectdown" *ngIf="!isReinjestion">
            <li *ngFor="let granularity of segmentGranularityList">
              <a href="javascript:" (click)="onChangeSegmentGranularity(granularity)">
                {{granularity.label}}
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- //Segment granularity -->
      <!-- Intervals -->
      <div class="ddp-ui-option-sub" *ngIf="!isUsedCurrentTimestampColumn()">
        <label class="ddp-ui-label-name">
          {{'msg.storage.ui.intervals' | translate}}
        </label>
        <div class="ddp-ui-setting-table ddp-clear">

          <div class="ddp-wrap-units">
            <div class="ddp-ui-units">
              <div class="ddp-ui-calen">
                <!-- disabled 시 ddp-disabled 추가 -->
                <div class="ddp-box-calen ">
                  <input type="text" class="ddp-input-typebasic ddp-data-calen" input-mask="calendar" (focusout)="checkStartInterval()" [(ngModel)]="startIntervalText">
                </div>
                <span class="ddp-bar">~</span>
                <div class="ddp-box-calen ">
                  <input type="text" class="ddp-input-typebasic ddp-data-calen" input-mask="calendar" (focusout)="checkEndInterval()" [(ngModel)]="endIntervalText">
                </div>
              </div>
              <!-- data -->
              <div class="ddp-data-units">
                <!-- error 일때 ddp-error-num 추가 -->
                <span class="ddp-data-num" [class.ddp-error-num]="granularityUnit > 10000">{{granularityUnit | numberCommas}}</span> {{'msg.storage.ui.intervals.units' | translate}}
              </div>
              <!-- //data -->
            </div>
            <div class="ddp-txt-error ddp-clear"[class.ddp-default]="intervalValid">
              <em class="ddp-icon-error-s"></em>{{intervalValid ? ('msg.storage.ui.intervals.valid.unit' | translate) : intervalValidMessage}}
            </div>
          </div>
        </div>
      </div>
      <!-- //Intervals -->
    </div>
    <!-- //Timestamp settings -->
    <!-- Roll up -->
    <div class="ddp-wrap-edit2 ddp-type">
      <label class="ddp-label-type ddp-info-inline ddp-bold ">
        {{'msg.storage.th.rollup.settings' | translate}}
        <!-- hover info -->
        <div class="ddp-wrap-hover-info ddp-type">
          <em class="ddp-icon-info3"></em>
          <!-- popup -->
          <div class="ddp-box-layout4">
            <div class="ddp-data-title">
              {{'msg.storage.th.rollup.description.title' | translate}}
            </div>
            <div class="ddp-data-det">
              {{'msg.storage.th.rollup.description' | translate}}<br><br>
              {{'msg.storage.th.rollup.description.selection' | translate}}<br>
              - {{'msg.storage.th.rollup.description.true' | translate}}<br>
              - {{'msg.storage.th.rollup.description.false' | translate}}
            </div>
          </div>
          <!-- //popup -->
        </div>
        <!-- //hover info -->
      </label>
      <div class="ddp-ui-option-sub">
        <!-- edit option -->
        <div class="ddp-ui-edit-option">
          <label class="ddp-label-radio" *ngFor="let type of rollUpTypeList" (change)="onChangeRollUpType(type)">
            <input type="radio" [checked]="selectedRollUpType.value === type.value" [disabled]="isReinjestion || includGeoType">
            <i class="ddp-icon-radio"></i>
            <span class="ddp-txt-radio">{{type.label}}</span>
          </label>
        </div>
        <!-- //edit option -->
      </div>
    </div>
    <!-- //Roll up -->
    <!-- Advanced setting -->
    <advanced-setting [createType]="createType"
                      [isShowAdvancedSetting]="isShowAdvancedSetting"
                      (changedShowFlag)="isShowAdvancedSetting = $event"
                      [tuningConfig]="tuningConfig"
                      [jobProperties]="jobProperties"></advanced-setting>
    <!-- //Advanced setting -->
  </div>
</div>
<!-- //contents in  -->

